<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>白给店铺首页</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/carousel.css">
    <style>
        h3 {
            font-weight: bold;
        }

        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        /* 侧栏导航 */
        .sideBox {
            padding: 10px;
            height: 220px;
            background: #fff;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .sideBox .hd {
            height: 30px;
            line-height: 30px;
            background: #f60;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
        }

        .sideBox .hd .more {
            color: #fff;
        }

        .sideBox .hd h3 span {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
        }

        .sideBox .bd {
            padding: 5px 0 0;
        }

        #sideMenu .bd li {
            margin-bottom: 2px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
        }

        #sideMenu .bd li a {
            display: block;
            background: #EAE6DD;
        }

        #sideMenu .bd li a:hover {
            background: #D5CFBF;
        }

        /* 列表页 */
        #mainBox {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox .path {
            float: right;
        }

        /* 位置导航 */
        .path {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .path a, .path span {
            margin: 0 5px;
        }

        /* 文章列表 */
        .newsList {
            padding: 10px;
            text-align: left;
        }

        .newsList li {
            background: no-repeat 2px 14px;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
        }

        .newsList li a {
            display: inline-block;
            *display: inline;
            zoom: 1;
            font-size: 14px;
        }

        .newsList li .date {
            float: right;
            color: #999;
        }

        .newsList li.split {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ddd;
            height: 0px;
            line-height: 0px;
            overflow: hidden;
        }

        /* 通用带图片的信息列表_普通式 */
        .picList {
            padding: 10px;
            text-align: left;
        }

        .picList li {
            margin: 0 5px;
            height: 190px;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a title="致力于在网上打造最便宜的最实惠的的店铺，相当于白给" class="navbar-brand" href="#" style="font-size: 32px;">白给店铺</a>
                    <button type="button" class="navbar-toggle collapsed"
                            data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                            aria-controls="navbar">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <c:choose>
                            <c:when test="${not empty userInfo}">
                                <li><a href="toUserIndex" style="color: red">${userInfo.username}</a></li>
                            </c:when>
                            <c:otherwise>
                                <li><a href="user-login.jsp">登录</a></li>
                            </c:otherwise>
                        </c:choose>
                        <li><a href="user-register.jsp">注册</a></li>
                        <c:choose>
                            <c:when test="${empty adminInfo}">
                                <li><a href="admin-login.jsp">管理员入口</a></li>
                            </c:when>
                            <c:otherwise>
                                <li><a href="getAllGoodsMutiFunction"
                                       style="color: lawngreen">${adminInfo.adminName}</a></li>
                            </c:otherwise>
                        </c:choose>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active"
             onclick="window.location.href='getAllTypeGoods'"
             style="cursor: pointer;">
            <img src="https://lwd520.oss-cn-zhangjiakou.aliyuncs.com/t010da1b9fff3a8694d.jpg" alt="First slide">
        </div>
        <div class="item" onclick="window.location.href='getAllTypeGoods'"
             style="cursor: pointer;">
            <img src="https://lwd520.oss-cn-zhangjiakou.aliyuncs.com/t0142e37cf93fad9e49.jpg" alt="Second slide">
        </div>
        <div class="item" onclick="window.location.href='getAllTypeGoods'"
             style="cursor: pointer;">
            <img src="https://lwd520.oss-cn-zhangjiakou.aliyuncs.com/t016f7a0d30f7b54143.jpg" alt="Third slide">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button"
       data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a> <a class="right carousel-control" href="#myCarousel" role="button"
            data-slide="next"> <span
        class="glyphicon glyphicon-chevron-right"></span> <span
        class="sr-only">Next</span>
</a>
</div>
<div class="container marketing">
    <div class="row">
        <div class="col-lg-4">
            <img class="img-circle" src="img/p1.jpg"
                 alt="Generic placeholder image"
                 style="width: 140px; height: 140px;">
            <h2>智能高清监控机器人</h2>
            <a class="btn btn-default" href="getAllTypeGoods" role="button">商品详情&raquo;</a>
        </div>
        <!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="img-circle" src="img/p2.jpg"
                 alt="Generic placeholder image"
                 style="width: 140px; height: 140px;">
            <h2>NEOKA智能手环</h2>
            <a class="btn btn-default" href="getAllTypeGoods" role="button">商品详情
                &raquo;</a>
        </div>
        <!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="img-circle" src="img/p3.png"
                 alt="Generic placeholder image"
                 style="width: 140px; height: 140px;">
            <h2>驱蚊扣</h2>
            <p>
                <a class="btn btn-default" href="getAllTypeGoods" role="button">商品详情 &raquo;</a>
            </p>
        </div>
        <!-- /.col-lg-4 -->
    </div>
    <!-- /.row -->
    <c:choose>
        <c:when test="${empty typeGoods }">没有加载到任何废了信息</c:when>
        <c:otherwise>
            <c:forEach var="type" items="${typeGoods }">
                <div class="container">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <div class="box ui-draggable" id="mainBox">
                                <div class="mHd" style="">
                                    <div class="path">
                                        <a href="getMoreGoodsByTid?tid=${type.tid}">更多...</a>
                                    </div>
                                    <h3>
                                        <label>${type.tname}</label>
                                    </h3>
                                </div>

                                <div class="mBd" style="padding-top: 10px;">
                                    <div class="row">
                                        <c:choose>
                                            <c:when test="${empty type.goodsList }">
                                                &nbsp;&nbsp; &nbsp;该类别暂无商品
                                            </c:when>
                                            <c:otherwise>
                                                <c:forEach var="goods" items="${type.goodsList }">
                                                    <div class="col-md-3">
                                                        <div class="thumbnail">
                                                            <img alt="300x200" src="${goods.picture}"/>
                                                            <div class="caption">
                                                                <h3 class="break">
                                                                    <a href="#">${goods.gname}</a>
                                                                </h3>
                                                                <p>
                                                                <div style="float: left;">
                                                                    <i class="glyphicon glyphicon glyphicon-yen"
                                                                       title="价格"></i>
                                                                    <span>价格${goods.price}￥</span>
                                                                </div>
                                                                <div style="float:right;">
                                                                    <i class="glyphicon glyphicon glyphicon-folder-close"
                                                                       title="库存"></i>
                                                                    <span>库存${goods.storenum}</span>
                                                                </div>
                                                                <button buy="${goods.gid}"
                                                                        class="btn btn-danger btn-default btn-block"
                                                                        data-toggle="modal" data-target="#buyModal">立即购买
                                                                </button>
                                                                <br>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </c:forEach>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </c:otherwise>
    </c:choose>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="#">关于我们</a>|
                        <a rel="nofollow" href="#">服务条款</a>|
                        <a rel="nofollow" href="#">免责声明</a>|
                        <a rel="nofollow" href="#">网站地图</a>|
                        <a rel="nofollow" href="#">联系我们</a>
                    </div>
                    <div class="copyRight">xxxxxxxxxxxxxxxxxxxx</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myAddLabel" align="center" style="color: red">确定所购商品信息</h4>
            </div>
            <div class="modal-body">
                <form action="buyGoods" method="post">
                    <div class="input-group">
                        <span class="input-group-addon">商品名称</span>
                        <input disabled="disabled" type="text" class="form-control" name="gname">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品单价</span>
                        <input disabled="disabled" type="text" class="form-control" name="price">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">需够数量</span>
                        <input type="text" class="form-control" name="number">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品类型</span>
                        <input disabled="disabled" type="text" class="form-control" name="tname">
                    </div>

                    <div class="input-group">
                        <button type="submit" class="btn btn-danger" data-dismiss="modal">购买</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("button[buy]").click(function () {
            console.log('aaaaaaaaaavvaa')
            var id = $(this).attr('buy')
            console.log(id);
            $.post("queryGoodsById2", {
                id: id
            }, function (data) {
                console.log(data);
                $("#buyModal input[name='gname']").val(data.gname);
                $("#buyModal input[name='price']").val(data.price);
                $("#buyModal input[name='tname']").val(data.tname);
            }, "json");
            //var path = "update?gid=" + id;
            //$("#update").attr("action", path);
        })
    })
</script>
</body>
</html>